import { Component, Host, h, Prop } from '@stencil/core';

@Component({
  tag: 'ui-floated-block',
  styleUrl: 'ui-floated-block.scss',
  shadow: true,
})
export class UiFloatedBlock {
  /**
   * 位置 默认 右下
   */
  @Prop() top: string;
  @Prop() left: string;
  @Prop() right: string = '20';
  @Prop() bottom: string = '20';
  /**
   * 单位 默认 px
   */
  @Prop() unit: string = 'px';
  /**
   * 内外边距 默认 10px
   */
  @Prop() padding: string = '10px';
  @Prop() margin: string = '10px';

  /**
   * 风格样式
   */
  @Prop() modeStyle: string = 'circle';

  // 提取样式计算为独立方法
  private getHostStyles() {
    let obj = {
      display: 'block',
      top: this.top ? `${this.top}${this.unit}` : undefined,
      left: this.left ? `${this.left}${this.unit}` : undefined,
      right: this.right ? `${this.right}${this.unit}` : undefined,
      bottom: this.bottom ? `${this.bottom}${this.unit}` : undefined,
    };

    // 属性值为空时 删除当前属性
    for (let key in obj) {
      if (obj[key] === undefined) {
        delete obj[key];
      }
    }
    return obj;
  }



  render() {
    return (
      <Host style={this.getHostStyles()}>
        <div class="ui-floated-block">
          {this.modeStyle ? (
            <div class={this.modeStyle}>
              <slot></slot>
            </div>
          ) : (
            <slot></slot>
          )}
        </div>
      </Host>
    );
  }
}
